<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<!--<div class="lazy_tip" id="lazy_tip"><span>1%</span><br>        载入中......</div>-->
<!--<div class="lazy_cover"></div>-->
<div class="resource_lazy hide"></div>
<div class="pic_edit">
    <h2 style="color:#4eaf7a;">双指旋转和双指缩放</h2>
    <div id="clipArea"></div>
    <button id="upload2">选择图片</button>
    <button id="clipBtn">上传图片</button>
    <input type="file" id="file">
</div>
<img src="" fileName="" id="hit" style="display:none;z-index: 9">
<div id="cover"></div>
css代码
<style>
    html, body {margin: 0;padding: 0;height: 100%;width: 100%;background: #FFFFFF;font: 13px/1.5em 'Open Sans', Helvetica, Arial, sans-serif;text-align: center;}
    .hide {display: none;}
    .show {display: block;}
    .pic_edit {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background:#e9e9e9; opacity:.8}
    #clipArea {margin: 0 auto;height: 300px;background:#f2f2f2;}
    #clipBtn{margin-top: 5px;background-color: rgb(221, 39, 39);color: #fff;padding: 8px 20px;border-radius: 5px;width: 40%;}
    #upload2{margin-top: 5px;background-color: rgb(221, 39, 39);color: #fff;padding: 8px 20px;border-radius: 5px;width: 40%;margin-left: 3%;}

    #hit {position: fixed;top: 19%;left: 9.375%;background: gainsboro;}
    .logo {position: absolute;bottom: 12%;z-index: 100;width: 46%;left: 27%;}


    @media screen and (max-height: 450px) {
        .show_labour .show_img {width: 75%;margin-top: 22%;}
        .show_labour .show5 {width: 80%;left: 10%;margin-top: 22%;}
        .show_labour .show5_btn {width: 62%;}
        #clipBtn, #upload2 {margin-top: 0px;padding: 5px 20px;}
    }
    .lazy_tip{position: absolute;margin-top: 35%;z-index: 1001;font-size: 25px;width: 100%;color: #4eaf7a;line-height: 30px;}
    .lazy_cover {width: 100%;height: 100%;background-color: black;z-index: 1000;color: #4eaf7a;font-size: 25px;opacity: 0.7;position: fixed;top: 0;left: 0;}
</style>
<!-- 必须引入的js -->
iscroll-zoom.js   实现移动端手指缩放图片的文件
jquery.photoClip.js  裁剪并上传的js文件
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.js"></script>

<script>
    var hammer = '';
    var currentIndex = 0;
    var body_width = $('body').width();
    var body_height = $('body').height();

    $("#clipArea").photoClip({
        width: body_width * 0.8125,
        height: body_width * 0.8125,
        file: "#file",
        view: "#hit",
        ok: "#clipBtn",
        loadStart: function () {
            //console.log("照片读取中");
        },
        loadComplete: function () {
            //console.log("照片读取完成");
        },
        clipFinish: function (dataURL) {
            //console.log("照片裁剪结束并返回裁剪结果");
            saveImageInfo();
        }
    });

    //图片上传
    function saveImageInfo() {
        var filename = $('#hit').attr('fileName');
        var img_data = $('#hit').attr('src');
        if(img_data==""){alert('null');}
        render(img_data);
        $.post("这里填写图片获取的网址", {image: img_data}, function (data) {
            if (data != '') {
                //console.info(data);
                //data 为返回文件名；
                alert('提交成功');
            }
        });
    }


    //图片上传结束
    $(function () {
        $('#upload2').on('touchstart', function () {
            //图片上传按钮
            $('#file').click();
        });
    })

    // 渲染 Image 缩放尺寸
    function render(src){
        var MAX_HEIGHT = 256;  //Image 缩放尺寸
        // 创建一个 Image 对象
        var image = new Image();

        // 绑定 load 事件处理器，加载完成后执行
        image.onload = function(){
            // 获取 canvas DOM 对象
            var canvas = document.getElementById("myCanvas");
            // 如果高度超标
            if(image.height > MAX_HEIGHT) {
                // 宽度等比例缩放 *=
                image.width *= MAX_HEIGHT / image.height;
                image.height = MAX_HEIGHT;
            }
            // 设置src属性，浏览器会自动加载。
            // 记住必须先绑定render()事件，才能设置src属性，否则会出同步问题。
            image.src = src;
        }
</script>

<div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
